 模板
<template>
  <section>
    <!-- 上一个视频按钮（图标） -->
<!--    <i class="iconfont icon-next"></i>-->

    <!-- 播放/暂停按钮：根据视频状态显示不同图标并绑定点击事件 -->
    <i v-if="paused" class="iconfont icon-24gf-play" @click="videoElement.play()"></i>
    <i v-else class="iconfont icon-24gf-pause2" @click="videoElement.pause()"></i>

    <!-- 下一个视频按钮（图标） -->
<!--    <i class="iconfont icon-next"></i>-->

    <!-- 时间显示按钮：展示当前播放时间和总时长，点击可进入编辑模式 -->
    <button v-if="!inputing" class="time-button" @click="onClick">
      <span>{{ displayDuration(current * 1000) }}</span>
      <span>/</span>
      <span>{{ displayDuration(duration * 1000) }}</span>
    </button>

    <!-- 时间输入表单：在编辑模式下允许用户输入时间 -->
    <form v-else class="time-input" @submit.prevent="inputRef.blur()">
      <input
        ref="inputRef"
        v-model="value"
        type="text"
        autofocus
        @blur="onBlur"
        @change="changed=true"
      >
    </form>
  </section>
</template>

<script setup lang="ts">
import { displayDuration } from '@/utils/common';

// 获取视频元素引用
const { videoElement } = toRefs(useVideoStore())

// 当前播放时间（单位：秒）
const current = ref(videoElement.value?.currentTime || 0)

// 视频总时长（单位：秒）
const duration = ref(videoElement.value?.duration || 0)

// 视频是否处于暂停状态
const paused = ref(videoElement.value?.paused ?? true)

/**
 * 监听视频播放时间更新事件，同步当前播放时间
 */
useEventListener(videoElement, 'timeupdate', ()=>{
  current.value = videoElement.value.currentTime
})

/**
 * 监听视频时长变化事件，同步视频总时长
 */
useEventListener(videoElement, 'durationchange', ()=>{
  duration.value = videoElement.value.duration
})

/**
 * 监听视频播放相关事件，更新播放状态为播放中
 */
useEventListener(videoElement, ['playing', 'play'], ()=>{
  paused.value = false
})

/**
 * 监听视频暂停事件，更新播放状态为已暂停
 */
useEventListener(videoElement, 'pause', ()=>{
  paused.value = true
})

// 是否正在输入时间
const inputing = ref(false)

// 输入框绑定的值
const value = ref('')

// 输入框 DOM 引用
const inputRef = useTemplateRef('inputRef')

// 标记输入框内容是否被修改
const changed = ref(false)

/**
 * 点击时间显示按钮触发的函数
 * 功能：
 * 1. 将当前播放时间格式化后赋值给输入框
 * 2. 重置修改标记
 * 3. 进入输入模式
 * 4. 聚焦到输入框
 */
function onClick() {
  value.value = displayDuration(current.value * 1000)
  changed.value = false
  inputing.value = true
  nextTick(()=>{
    inputRef.value?.focus()
  })
}

/**
 * 输入框失去焦点时触发的函数
 * 功能：
 * 1. 退出输入模式
 * 2. 如果内容被修改，则解析输入的时间并设置视频播放位置
 *
 * 时间解析逻辑：
 * - 支持 hh:mm:ss、mm:ss 或 ss 格式
 * - 从右向左依次解析秒、分、时
 */
function onBlur() {
  inputing.value = false
  if (changed.value) {
    const arr = value.value.split(':').map(Number).toReversed()
    let result = 0
    if (Number.isInteger(arr[0])) {
      result = arr[0]
    }
    if (Number.isInteger(arr[1])) {
      result += arr[1] * 60
    }
    if (Number.isInteger(arr[2])) {
      result += arr[2] * 60 * 60
    }
    videoElement.value.currentTime = result
  }
}
</script>

<style scoped lang="scss">
section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  & > * {
    color: #f3f5f7f1;
    transition: color .3s;
    &:hover {
      color: #fff;
    }
  }
  i {
    cursor: pointer;
    padding: 0 12px;
  }
  i:nth-of-type(1) {
    font-size: 20px;
    rotate: -180deg;
  }
  i:nth-of-type(2) {
    font-size: 24px;
  }
  i:nth-of-type(3) {
    font-size: 20px;
  }
  .time-button {
    display: flex;
    gap: 4px;
    font-size: 14px;
    background: none;
    cursor: text;
    height: 30px;
    line-height: 30px;
    width: 85px;
  }
  .time-input {
    width: 85px;
    height: 30px;
    line-height: 30px;
    background-color: #333;
    display: flex;
    justify-content: center;
    input {
      max-width: 60px;
      text-align: center;
      background: none;
      color: #fff;
    }
  }
}
</style>
